<template>
	<div class="echarts">
		<div id="seeChart" :style="{ width: '100%', height: '45%' }"></div>
		<div id="moreChart" :style="{ width: '100%', height: '45%' }"></div>
	</div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";
import { onMounted, reactive } from "@vue/runtime-core";
import { apicensusvisit, apicensusmaximum } from "@/network/census";
export default {
	name: "Echarts",
	setup() {
		const data = reactive({
			onex: [],
			oney: [],
			two: [],
		});
		const oneinit = () => {
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById("seeChart"));
			myChart.setOption({
				title: { text: "每月访客数量" },
				tooltip: {},
				xAxis: {
					data: data.onex,
				},
				yAxis: {
					type: "value",
				},
				series: [
					{
						name: "访客数量",
						data: data.oney,
						type: "line",
					},
				],
			});
		};

		const twoinit = () => {
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById("moreChart"));
			// 绘制图表
			myChart.setOption({
				title: { text: "浏览数量" },
				tooltip: {},
				series: [
					{
						type: "pie",
						data: data.two,
					},
				],
			});
		};
		onMounted(() => {
			getcensusvisit();
			getcensusmaximum();
		});

		const getcensusvisit = () => {
			apicensusvisit()
				.then((res) => {
					console.log(res);
					if (res.status == 200) {
						data.onex = res.data.map((item) => {
							return item.years_month;
						});
						data.oney = res.data.map((item) => {
							return item.number;
						});
						oneinit();
					}
				})
				.catch((err) => {});
		};

		const getcensusmaximum = () => {
			apicensusmaximum()
				.then((res) => {
					if (res.status == 200) {
						res.data.forEach((item) => {
							data.two.push({
								value: item.number,
								name: item.name,
							});
							twoinit();
						});
					}
				})
				.catch((err) => {});
		};
	},
};
</script>

<style lang="scss" scoped>
.echarts {
	height: 100%;
}
</style>
